import { useState,useReducer } from 'react';
import{produce}from'immer'
function reducer(state,action)
{
    switch(action.type)
    {
        case 'add':
            return produce(state,(state)=>{
              state.a.b.c+=action.num
            })
        case 'minus':
            return produce(state,(state)=>{
                state.a.b.c-=action.num
            })
    }
}
       
function App3() {
    // useReducer接受的第二个参数作为reducer的第一个参数
    // dispatch接受的参数，作为reducer的第二个参数
    const[res,dispatch]=useReducer(reducer,{result:0,a:{b:{c:1,d:{e:2}}}})
    // 当num值变更时，浏览器会等呢个useLaoutEffect中的effect函数执行完毕再渲染，effect会阻塞很久，超过500ms会导致掉帧
    return(
        <div>
            <h3>{res.a.b.c}</h3>
            
            <button onClick={()=>dispatch({type:'add',num:2})}>+</button>
            <button onClick={()=>dispatch({type:'minus',num:1})}>-</button>
        </div>
    )
}
export default App3;